<style>
	.a{
		position: fixed;
		width: 100%;
		height: 10px;
		bottom: 4px;
		right: .5px;
	}
	.roll_bar{
		background-color: #aaa;
		border-radius: 10px;
		overflow: hidden;
	}
	.roll_bar div{
		margin: 1px;
		width: 0;
		height: 100%;
		border-radius: 10px;
		background: linear-gradient(60deg,#1a6adf 25%,#578cdf 25%,#578cdf 50%,#1a6adf 50%,#1a6adf 75%,#578cdf 75%,#578cdf 100%);
		background-size: 30px 30px;
		transition: .8s cubic-bezier(0, 0.4, 0.4, 1);
		animation: reverse roll_bar_run 0.40s linear infinite;
	}
	@keyframes roll_bar_run{
		0%{ background-position: 30px 0; }
		100%{ background-position: 0 0; }
	}
</style>
<div style="height:3000px;"></div>
<div class="a roll_bar"><div></div></div>
<script>
	const roll=document.querySelector(".roll_bar div");
	const roll_change=function(){
		const top=document.body.scrollTop;
		const height=document.body.scrollHeight;
		const length=window.screen.availHeight;
		const position=(top/(height-length+93))*100;
		roll.style.width=`${position}%`;
	};
	roll_change();
	window.onscroll= function(){
		roll_change();
	};
</script>